<template>
  <!-- 内容 -->
  <div class="main">
    <div class="container">
      <div class="position-relative">
        <!-- 选项 -->
        <ul class="nav nav-tabs mb-3">
          <li class="nav-item">
            <router-link class="nav-link position-relative active" to="/letter">
              朋友私信
              <span class="badge badge-danger" v-if="letterUnreadCount > 0">{{ letterUnreadCount }}</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link position-relative" to="/notice">
              系统通知
              <span class="badge badge-danger" v-if="noticeUnreadCount > 0">{{ noticeUnreadCount }}</span>
            </router-link>
          </li>
        </ul>
        <button type="button" class="btn btn-primary btn-sm position-absolute rt-0" data-toggle="modal" data-target="#sendModal">发私信</button>
      </div>
      <!-- 弹出框 -->
      <div class="modal fade" id="sendModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">发私信</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="col-form-label">发给：</label>
                  <input type="text" class="form-control" id="recipient-name" v-model="toName">
                </div>
                <div class="form-group">
                  <label for="message-text" class="col-form-label">内容：</label>
                  <textarea class="form-control" id="message-text" rows="10" v-model="content" />
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="resetInput">取消</button>
              <button type="button" class="btn btn-primary" id="sendBtn" @click="sendLetter">发送</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 提示框 -->
      <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="hintModalLabel">提示</h5>
            </div>
            <div class="modal-body" id="hintBody">
              发送完毕!
            </div>
          </div>
        </div>
      </div>

      <!-- 私信列表 -->
      <ul class="list-unstyled" v-if="conversationVoList.length > 0">
        <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-for="conversationVo in conversationVoList" :key="conversationVo.conversation.id">
          <span class="badge badge-danger" v-if="conversationVo.unreadCount > 0">{{ conversationVo.unreadCount }}</span>
          <router-link :to="'/profile/' + conversationVo.target.id">
            <img :src="conversationVo.target.headerUrl" class="mr-4 rounded-circle user-header" alt="用户头像" >
          </router-link>
          <div class="media-body">
            <h6 class="mt-0 mb-3">
              <span class="text-success">{{ conversationVo.target.username }}</span>
              <span class="float-right text-muted font-size-12">{{ conversationVo.conversation.createTime }}</span>
            </h6>
            <div>
              <router-link :to="'letter/detail/' + conversationVo.conversation.conversationId">{{ conversationVo.conversation.content }}</router-link>
              <ul class="d-inline font-size-12 float-right">
                <li class="d-inline ml-2"><a :href="'letter/detail/' + conversationVo.conversation.conversationId" class="text-primary">共{{ conversationVo.letterCount }}条会话</a></li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
      <!-- 分页 -->
      <div class="mt-5" v-if="total > 0">
          <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="pageSizes"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Letter from '@/api/letter'
import Notice from '@/api/notice'

const letterUnreadCount = ref(0)

const noticeUnreadCount = ref(0)

const conversationVoList = ref([])

const toName = ref('')

const content = ref('')

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const total = ref(100)
const pageSizes = ref([5, 10, 20, 25])
const currentPage = ref(1)
const pageSize = ref(5)

onMounted(async () => {
  getLetterUnreadCount()
  getNoticeUnreadCount()
  getconversationVoList()
})

const getLetterUnreadCount = async () => {
  Letter.getLetterUnreadCount().then((res) => {
    letterUnreadCount.value = res
  })
}

const getconversationVoList = async () => {
  Letter.getLetterList(currentPage.value, pageSize.value).then((res) => {
    conversationVoList.value = res
    total.value = conversationVoList.value.length
  })
}

const handleSizeChange = async () => {
  getconversationVoList()
}

const handleCurrentChange = async () => {
  getconversationVoList()
}

const sendLetter = async () => {
  await Letter.sendLetter(toName.value, content.value).catch(err => {
    console.log(err)
  })
  // 重置输入框
  resetInput()
  // 发送提示
  $("#sendModal").modal("hide")
  $("#hintModal").modal("show")
  setTimeout(async () => {
    // 刷新页面
    getLetterUnreadCount()
    getconversationVoList()
    $("#hintModal").modal("hide")
  }, 1000)
}

const resetInput = async () => {
  toName.value = ''
  content.value = ''
}

const getNoticeUnreadCount = async () => {
  Notice.getNoticeUnreadCount().then(res => {
    noticeUnreadCount.value = res
  })
}

</script>

<style scoped>
  @import '@/style/letter.css'
</style>
